
<!DOCTYPE html>
<html lang="zh-CN" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>后处理技术（上） - 浪子之心</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Blog,"> 
    <meta name="description" content="MrChen Bolg,后处理（上）启用后处理在摄像头添加脚本
123456789101112131415161718192021using System.Collections;using System.Collecti,"> 
    <meta name="author" content="Jack Chen"> 
    <link rel="alternative" href="atom.xml" title="浪子之心" type="application/atom+xml"> 
    <link rel="icon" href="/blog/img/favicon.png"> 
    
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

    
<link rel="stylesheet" href="/blog/css/diaspora.css">

<meta name="generator" content="Hexo 5.4.1"><link rel="stylesheet" href="/blog/css/prism.css" type="text/css"></head>

<body class="loading">
    <span id="config-title" style="display:none">浪子之心</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://mrchenlearnspace.github.io/blog"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">后处理技术（上）</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">后处理技术（上）</h1>
        <div class="stuff">
            <span>二月 20, 2022</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/blog/tags/Shader/" rel="tag">Shader</a></li></ul>


        </div>
        <div class="content markdown">
            <h1 id="后处理（上）"><a href="#后处理（上）" class="headerlink" title="后处理（上）"></a>后处理（上）</h1><h2 id="启用后处理"><a href="#启用后处理" class="headerlink" title="启用后处理"></a>启用后处理</h2><p>在摄像头添加脚本</p>
<figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System.Collections;</span><br><span class="line"><span class="keyword">using</span> System.Collections.Generic;</span><br><span class="line"><span class="keyword">using</span> UnityEngine;</span><br><span class="line">[<span class="meta">ExecuteInEditMode()</span>]<span class="comment">//编辑模式就能看到效果</span></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title">CameraPostPress</span> : <span class="title">MonoBehaviour</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">public</span> Material mat;</span><br><span class="line">    <span class="comment">// Start is called before the first frame update</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">Start</span>()</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">if</span>(mat==<span class="literal">null</span>||SystemInfo.supportsImageEffects==<span class="literal">false</span>||mat.shader==<span class="literal">null</span>||mat.shader.isSupported==<span class="literal">false</span>) &#123;</span><br><span class="line">            enabled = <span class="literal">false</span>;</span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">OnRenderImage</span>(<span class="params">RenderTexture source, RenderTexture destination</span>)</span> &#123;</span><br><span class="line">        <span class="comment">//当渲染图片启用   source是帧处理的图片 0是pass的顺序</span></span><br><span class="line">        Graphics.Blit(source,destination,mat, <span class="number">0</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h2 id="背景板"><a href="#背景板" class="headerlink" title="背景板"></a>背景板</h2><p><img src="https://img-blog.csdnimg.cn/d5c8641a1ca14b439e5c36b1b84949da.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<p>只要物体能拓展到屏幕上，就能让图片平铺到图片上，在片源部分做</p>
<figure class="highlight glsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">half2 screen_uv = i.screen_pos.xy / (i.screen_pos.w + <span class="number">0.000001</span>);</span><br><span class="line">screen_uv = (screen_uv + <span class="number">1.0</span>) * <span class="number">0.5</span>;</span><br></pre></td></tr></table></figure>

<p>注意的是dx的y轴是反的</p>
<p>有三套解决方案</p>
<h3 id="第一种"><a href="#第一种" class="headerlink" title="第一种"></a>第一种</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">v2f <span class="title function_">vert</span> <span class="params">(appdata v)</span></span><br><span class="line">&#123;</span><br><span class="line">    v2f o;</span><br><span class="line">    o.vertex = UnityObjectToClipPos(v.vertex);</span><br><span class="line">    o.uv = v.uv;</span><br><span class="line">    o.screen_pos = o.vertex;</span><br><span class="line">    o.screen_pos.y = -o.screen_pos.y;</span><br><span class="line">    <span class="keyword">return</span> o;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">fixed4 <span class="title function_">frag</span><span class="params">(v2f i)</span> : SV_Target</span><br><span class="line">&#123;</span><br><span class="line">    half2 screen_uv = i.screen_pos.xy / (i.screen_pos.w + <span class="number">0.000001</span>);</span><br><span class="line">    screen_uv = (screen_uv + <span class="number">1.0</span>) * <span class="number">0.5</span>; </span><br><span class="line">    <span class="comment">// sample the texture</span></span><br><span class="line">    fixed4 col = tex2D(_MainTex, screen_uv);</span><br><span class="line">   </span><br><span class="line">    <span class="keyword">return</span> col;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="第二种"><a href="#第二种" class="headerlink" title="第二种"></a>第二种</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">v2f <span class="title function_">vert</span> <span class="params">(appdata v)</span></span><br><span class="line">&#123;</span><br><span class="line">    v2f o;</span><br><span class="line">    o.vertex = UnityObjectToClipPos(v.vertex);</span><br><span class="line">    o.uv = v.uv;</span><br><span class="line">    o.screen_pos = o.vertex;</span><br><span class="line">    o.screen_pos.y = o.screen_pos.y * _ProjectionParams.x;<span class="comment">//改变</span></span><br><span class="line">    <span class="keyword">return</span> o;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">fixed4 <span class="title function_">frag</span><span class="params">(v2f i)</span> : SV_Target</span><br><span class="line">&#123;</span><br><span class="line">    half2 screen_uv = i.screen_pos.xy / (i.screen_pos.w + <span class="number">0.000001</span>);</span><br><span class="line">    screen_uv = (screen_uv + <span class="number">1.0</span>) * <span class="number">0.5</span>;</span><br><span class="line">    <span class="comment">// sample the texture</span></span><br><span class="line">    fixed4 col = tex2D(_MainTex, screen_uv);</span><br><span class="line">   </span><br><span class="line">    <span class="keyword">return</span> col;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="第三种"><a href="#第三种" class="headerlink" title="第三种"></a>第三种</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">v2f <span class="title function_">vert</span> <span class="params">(appdata v)</span></span><br><span class="line">&#123;</span><br><span class="line">    v2f o;</span><br><span class="line">    o.vertex = UnityObjectToClipPos(v.vertex);</span><br><span class="line">    o.uv = v.uv;</span><br><span class="line">    o.screen_pos=ComputeScreenPos(o.vertex);<span class="comment">//改变</span></span><br><span class="line">    <span class="keyword">return</span> o;</span><br><span class="line">&#125;c</span><br><span class="line"></span><br><span class="line">fixed4 <span class="title function_">frag</span><span class="params">(v2f i)</span> : SV_Target</span><br><span class="line">&#123;</span><br><span class="line">    half2 screen_uv = i.screen_pos.xy / (i.screen_pos.w + <span class="number">0.000001</span>);</span><br><span class="line">       <span class="comment">//改变</span></span><br><span class="line">    <span class="comment">// sample the texture</span></span><br><span class="line">    fixed4 col = tex2D(_MainTex, screen_uv);</span><br><span class="line">   </span><br><span class="line">    <span class="keyword">return</span> col;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="背景板代码"><a href="#背景板代码" class="headerlink" title="背景板代码"></a>背景板代码</h3><figure class="highlight glsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">Shader &quot;Unlit/Quad&quot;</span><br><span class="line">&#123;</span><br><span class="line">    Properties</span><br><span class="line">    &#123;</span><br><span class="line">        _MainTex (&quot;Texture&quot;, <span class="number">2</span>D) = &quot;white&quot; &#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    SubShader</span><br><span class="line">    &#123;</span><br><span class="line">        Tags &#123; &quot;RenderType&quot;=&quot;Opaque&quot; &#125;</span><br><span class="line">        LOD <span class="number">100</span></span><br><span class="line"></span><br><span class="line">        Pass</span><br><span class="line">        &#123;</span><br><span class="line">            CGPROGRAM</span><br><span class="line">            <span class="meta">#pragma vertex vert</span></span><br><span class="line">            <span class="meta">#pragma fragment frag</span></span><br><span class="line">            <span class="comment">// make fog work</span></span><br><span class="line">           </span><br><span class="line"></span><br><span class="line">            <span class="meta">#include &quot;UnityCG.cginc&quot;</span></span><br><span class="line"></span><br><span class="line">            struct appdata</span><br><span class="line">            &#123;</span><br><span class="line">                float4 vertex : POSITION;</span><br><span class="line">                float2 uv : TEXCOORD0;</span><br><span class="line">            &#125;;</span><br><span class="line"></span><br><span class="line">            struct v2f</span><br><span class="line">            &#123;</span><br><span class="line">                float2 uv : TEXCOORD0;</span><br><span class="line">                float4 screen_pos:TEXCOORD1;</span><br><span class="line">                float4 vertex : SV_POSITION;</span><br><span class="line">            &#125;;</span><br><span class="line"></span><br><span class="line">            <span class="type">sampler2D</span> _MainTex;</span><br><span class="line">            float4 _MainTex_ST;</span><br><span class="line"></span><br><span class="line">            v2f vert (appdata v)</span><br><span class="line">            &#123;</span><br><span class="line">                v2f o;</span><br><span class="line">                o.vertex = UnityObjectToClipPos(v.vertex);</span><br><span class="line">                o.uv = v.uv;</span><br><span class="line">                <span class="comment">//o.screen_pos = o.vertex;</span></span><br><span class="line">                <span class="comment">//o.screen_pos.y = -o.screen_pos.y;</span></span><br><span class="line">                o.screen_pos=ComputeScreenPos(o.vertex);</span><br><span class="line">                <span class="keyword">return</span> o;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            fixed4 frag(v2f i) : SV_Target</span><br><span class="line">            &#123;</span><br><span class="line">                half2 screen_uv = i.screen_pos.xy / (i.screen_pos.w + <span class="number">0.000001</span>);</span><br><span class="line">                screen_uv = (screen_uv + <span class="number">1.0</span>) * <span class="number">0.5</span>;</span><br><span class="line">                <span class="comment">// sample the texture</span></span><br><span class="line">                fixed4 col = tex2D(_MainTex, screen_uv);</span><br><span class="line">               </span><br><span class="line">                <span class="keyword">return</span> col;</span><br><span class="line">            &#125;</span><br><span class="line">            ENDCG</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="调色"><a href="#调色" class="headerlink" title="调色"></a>调色</h2><p><img src="https://img-blog.csdnimg.cn/67f8be49624b4c17be5c5d3a4f3100d7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h3 id="ASE"><a href="#ASE" class="headerlink" title="ASE"></a>ASE</h3><p><img src="https://img-blog.csdnimg.cn/68a7f0f72c9645ff8b3eb0c407796880.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h3 id="内容"><a href="#内容" class="headerlink" title="内容"></a>内容</h3><h4 id="色调"><a href="#色调" class="headerlink" title="色调"></a>色调</h4><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">float3 <span class="title function_">HSVToRGB</span><span class="params">(float3 c)</span> &#123;</span><br><span class="line">    float4 K = float4(<span class="number">1.0</span>, <span class="number">2.0</span> / <span class="number">3.0</span>, <span class="number">1.0</span> / <span class="number">3.0</span>, <span class="number">3.0</span>);</span><br><span class="line">    float3 p = <span class="built_in">abs</span>(frac(c.xxx + K.xyz) * <span class="number">6.0</span> - K.www);</span><br><span class="line">    <span class="keyword">return</span> c.z * lerp(K.xxx, saturate(p - K.xxx), c.y);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//RGB B*lerp(float3(1.0,1.0,1.0)) frac 取小数部分 色调（H），饱和度（S），明度（V）。</span></span><br><span class="line"><span class="comment">//H=B*lerp(1.0f,saturate(abs(frac(R + 1.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line"><span class="comment">//S=B*lerp(1.0f,saturate(abs(frac(R +  2.0 / 3.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line"><span class="comment">//V=B*lerp(1.0f,saturate(abs(frac(R +  1.0 / 3.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line">float3 <span class="title function_">RGBToHSV</span><span class="params">(float3 c)</span> &#123;</span><br><span class="line">    float4 K = float4(<span class="number">0.0</span>, <span class="number">-1.0</span> / <span class="number">3.0</span>, <span class="number">2.0</span> / <span class="number">3.0</span>, <span class="number">-1.0</span>);</span><br><span class="line">    float4 p = lerp(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));</span><br><span class="line">    float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));</span><br><span class="line">    <span class="type">float</span> d = q.x - min(q.w, q.y);</span><br><span class="line">    <span class="type">float</span> e = <span class="number">1.0e-10</span>;</span><br><span class="line">    <span class="keyword">return</span> float3(<span class="built_in">abs</span>(q.z + (q.w - q.y) / (<span class="number">6.0</span> * d + e)), d / (q.x + e), q.x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="亮度"><a href="#亮度" class="headerlink" title="亮度"></a>亮度</h4><p>简单粗暴直接乘</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">col.rgb=col.rgb*_Brightness;</span><br></pre></td></tr></table></figure>

<h4 id="饱和度"><a href="#饱和度" class="headerlink" title="饱和度"></a>饱和度</h4><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">float</span> lumin=dot(col.rgb,float3(<span class="number">0.22</span>,<span class="number">0.707</span>,<span class="number">0.071</span>));</span><br><span class="line">col.rgb=lerp(lumin,col.rgb,_Saturation);</span><br></pre></td></tr></table></figure>

<h4 id="对比度"><a href="#对比度" class="headerlink" title="对比度"></a>对比度</h4><p>float3(0.5,0.5,0.5)是灰色</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">col.rgb=lerp(float3(<span class="number">0.5</span>,<span class="number">0.5</span>,<span class="number">0.5</span>),col.rgb,_Contrast);</span><br></pre></td></tr></table></figure>

<h4 id="暗角-x2F-晕影"><a href="#暗角-x2F-晕影" class="headerlink" title="暗角&#x2F;晕影"></a>暗角&#x2F;晕影</h4><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">float2 d=<span class="built_in">abs</span>(i.uv<span class="number">-0.5</span>)*_VignetteIntensity;</span><br><span class="line">d=<span class="built_in">pow</span>(saturate(d),_VignetteRoundness);</span><br><span class="line"><span class="type">float</span> dist=length(d);</span><br><span class="line">col.rgb=<span class="built_in">pow</span>(saturate(<span class="number">1.0</span>-dist*dist),_VignetteSmoothness)*col.rgb;</span><br></pre></td></tr></table></figure>

<h3 id="调色代码"><a href="#调色代码" class="headerlink" title="调色代码"></a>调色代码</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line">Shader <span class="string">&quot;Hidden/Color_Code&quot;</span></span><br><span class="line">&#123;</span><br><span class="line">    Properties</span><br><span class="line">    &#123;</span><br><span class="line">        _MainTex (<span class="string">&quot;Texture&quot;</span>, <span class="number">2</span>D) = <span class="string">&quot;white&quot;</span> &#123;&#125;</span><br><span class="line">        _Brightness(<span class="string">&quot;Brightness&quot;</span>, Float) = <span class="number">1</span></span><br><span class="line">        _Saturation(<span class="string">&quot;Saturation&quot;</span>,Float) = <span class="number">1</span></span><br><span class="line">        _Contrast(<span class="string">&quot;Contrast&quot;</span>,Float) = <span class="number">1</span></span><br><span class="line">        _VignetteIntensity(<span class="string">&quot;VignetteIntensity&quot;</span>,Range(<span class="number">0.05</span>,<span class="number">3.0</span>)) = <span class="number">1.5</span></span><br><span class="line">        _VignetteRoundness(<span class="string">&quot;VignetteRoundness&quot;</span>,Range(<span class="number">1</span>,<span class="number">6</span>)) = <span class="number">5</span></span><br><span class="line">        _VignetteSmoothness(<span class="string">&quot;VignetteSmoothness&quot;</span>,Range(<span class="number">0.05</span>,<span class="number">5</span>)) = <span class="number">5</span></span><br><span class="line">        _HueShift(<span class="string">&quot;HueShift&quot;</span>,Range(<span class="number">0</span>,<span class="number">1</span>)) = <span class="number">0</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    SubShader</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// No culling or depth</span></span><br><span class="line">        Cull Off ZWrite Off ZTest Always</span><br><span class="line"></span><br><span class="line">        Pass</span><br><span class="line">        &#123;</span><br><span class="line">            CGPROGRAM</span><br><span class="line">            <span class="meta">#<span class="keyword">pragma</span> vertex vert_img</span></span><br><span class="line">            <span class="meta">#<span class="keyword">pragma</span> fragment frag</span></span><br><span class="line"></span><br><span class="line">            <span class="meta">#<span class="keyword">include</span> <span class="string">&quot;UnityCG.cginc&quot;</span></span></span><br><span class="line">            float3 HSVToRGB(float3 c) &#123;</span><br><span class="line">                float4 K = float4(<span class="number">1.0</span>, <span class="number">2.0</span> / <span class="number">3.0</span>, <span class="number">1.0</span> / <span class="number">3.0</span>, <span class="number">3.0</span>);</span><br><span class="line">                float3 p = <span class="built_in">abs</span>(frac(c.xxx + K.xyz) * <span class="number">6.0</span> - K.www);</span><br><span class="line">                <span class="keyword">return</span> c.z * lerp(K.xxx, saturate(p - K.xxx), c.y);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">//RGB B*lerp(float3(1.0,1.0,1.0)) frac 取小数部分 色调（H），饱和度（S），明度（V）。</span></span><br><span class="line">            <span class="comment">//H=B*lerp(1.0f,saturate(abs(frac(R + 1.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line">            <span class="comment">//S=B*lerp(1.0f,saturate(abs(frac(R +  2.0 / 3.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line">            <span class="comment">//V=B*lerp(1.0f,saturate(abs(frac(R +  1.0 / 3.0) * 6.0 - 3.0) - 1.0f),G)</span></span><br><span class="line">            float3 <span class="title function_">RGBToHSV</span><span class="params">(float3 c)</span> &#123;</span><br><span class="line">                float4 K = float4(<span class="number">0.0</span>, <span class="number">-1.0</span> / <span class="number">3.0</span>, <span class="number">2.0</span> / <span class="number">3.0</span>, <span class="number">-1.0</span>);</span><br><span class="line">                float4 p = lerp(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));</span><br><span class="line">                float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));</span><br><span class="line">                <span class="type">float</span> d = q.x - min(q.w, q.y);</span><br><span class="line">                <span class="type">float</span> e = <span class="number">1.0e-10</span>;</span><br><span class="line">                <span class="keyword">return</span> float3(<span class="built_in">abs</span>(q.z + (q.w - q.y) / (<span class="number">6.0</span> * d + e)), d / (q.x + e), q.x);</span><br><span class="line">            &#125;</span><br><span class="line">            sampler2D _MainTex;</span><br><span class="line">            <span class="type">float</span> _Brightness;</span><br><span class="line">            <span class="type">float</span> _Saturation;</span><br><span class="line">            <span class="type">float</span> _Contrast;</span><br><span class="line">            <span class="type">float</span> _VignetteIntensity;</span><br><span class="line">            <span class="type">float</span> _VignetteRoundness;</span><br><span class="line">            <span class="type">float</span> _VignetteSmoothness;</span><br><span class="line">            <span class="type">float</span> _HueShift;</span><br><span class="line"></span><br><span class="line">            fixed4 <span class="title function_">frag</span> <span class="params">(v2f_img i)</span> : SV_Target</span><br><span class="line">            &#123;</span><br><span class="line">                </span><br><span class="line">                fixed4 sourse = tex2D(_MainTex, i.uv);</span><br><span class="line">                fixed4 col=sourse;</span><br><span class="line">                <span class="comment">//色相</span></span><br><span class="line">                fixed3 hsv = RGBToHSV(sourse.rgb);</span><br><span class="line">                hsv.r= hsv.r +_HueShift;</span><br><span class="line">                col.rgb=HSVToRGB(hsv);</span><br><span class="line">                <span class="comment">//亮度</span></span><br><span class="line">                col.rgb=col.rgb*_Brightness;</span><br><span class="line">                <span class="comment">//饱和度</span></span><br><span class="line">                <span class="type">float</span> lumin=dot(col.rgb,float3(<span class="number">0.22</span>,<span class="number">0.707</span>,<span class="number">0.071</span>));</span><br><span class="line">                col.rgb=lerp(lumin,col.rgb,_Saturation);</span><br><span class="line">                <span class="comment">//对比度</span></span><br><span class="line">                col.rgb=lerp(float3(<span class="number">0.5</span>,<span class="number">0.5</span>,<span class="number">0.5</span>),col.rgb,_Contrast);</span><br><span class="line">                <span class="comment">//暗角/晕影</span></span><br><span class="line">                float2 d=<span class="built_in">abs</span>(i.uv<span class="number">-0.5</span>)*_VignetteIntensity;</span><br><span class="line"></span><br><span class="line">                d=<span class="built_in">pow</span>(saturate(d),_VignetteRoundness);</span><br><span class="line">                <span class="type">float</span> dist=length(d);</span><br><span class="line">                col.rgb=<span class="built_in">pow</span>(saturate(<span class="number">1.0</span>-dist*dist),_VignetteSmoothness)*col.rgb; </span><br><span class="line">                <span class="keyword">return</span> col;</span><br><span class="line">            &#125;</span><br><span class="line">            ENDCG</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="破碎的玻璃"><a href="#破碎的玻璃" class="headerlink" title="破碎的玻璃"></a>破碎的玻璃</h2><p><img src="https://img-blog.csdnimg.cn/bdbfbc20fb5140fa916c22f3d7e11676.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUEMgRXJyb3I=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></p>
<h3 id="上玻璃"><a href="#上玻璃" class="headerlink" title="上玻璃"></a>上玻璃</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">float</span> aspect = _ScreenParams.x / _ScreenParams.y; <span class="comment">// x = width y = height z = 1 + 1.0/width w = 1 + 1.0/height</span></span><br><span class="line">float2 glass_uv = float2(i.uv.x * aspect, i.uv.y) * _GlassMask_ST.xy + _GlassMask_ST.zw;</span><br><span class="line"></span><br><span class="line">half glass_opacity = tex2D(_GlassMask, glass_uv).r;</span><br><span class="line">finalcolor = lerp(finalcolor, _GlassCrack.xxx, glass_opacity);</span><br></pre></td></tr></table></figure>

<h3 id="上法线"><a href="#上法线" class="headerlink" title="上法线"></a>上法线</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">half3 glass_normal = UnpackNormal(tex2D(_GlassNormal, glass_uv));</span><br></pre></td></tr></table></figure>

<h3 id="解决边缘法线贴图重影"><a href="#解决边缘法线贴图重影" class="headerlink" title="解决边缘法线贴图重影"></a>解决边缘法线贴图重影</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">half2 d = <span class="number">1.0</span> - smoothstep(<span class="number">0.95</span>,<span class="number">1</span>,<span class="built_in">abs</span>(i.uv * <span class="number">2.0</span> - <span class="number">1.0</span>));</span><br><span class="line">half vfactor = d.x * d.y;</span><br></pre></td></tr></table></figure>

<h3 id="解决法线贴图毛玻璃的问题"><a href="#解决法线贴图毛玻璃的问题" class="headerlink" title="解决法线贴图毛玻璃的问题"></a>解决法线贴图毛玻璃的问题</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">float2 d_mask = step(<span class="number">0.005</span>, <span class="built_in">abs</span>(glass_normal.xy));</span><br><span class="line"><span class="type">float</span> mask = d_mask.x * d_mask.y;</span><br><span class="line">half2 uv_distort = i.uv + glass_normal.xy * _Distort * vfactor * mask;</span><br><span class="line">half4 col = tex2D(_MainTex, uv_distort);</span><br></pre></td></tr></table></figure>

<h3 id="总代码"><a href="#总代码" class="headerlink" title="总代码"></a>总代码</h3><figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line">Shader <span class="string">&quot;Hidden/BrokenGlass&quot;</span></span><br><span class="line">&#123;</span><br><span class="line">  Properties</span><br><span class="line">  &#123;</span><br><span class="line">    _MainTex (<span class="string">&quot;Texture&quot;</span>, <span class="number">2</span>D) = <span class="string">&quot;white&quot;</span> &#123;&#125;</span><br><span class="line">    _GlassMask(<span class="string">&quot;GlassMask&quot;</span>,<span class="number">2</span>D) = <span class="string">&quot;black&quot;</span>&#123;&#125;</span><br><span class="line">    _GlassCrack(<span class="string">&quot;GlassCrack&quot;</span>,Float) = <span class="number">1</span></span><br><span class="line">    _GlassNormal(<span class="string">&quot;GlassNormal&quot;</span>,<span class="number">2</span>D) = <span class="string">&quot;bump&quot;</span>&#123;&#125;</span><br><span class="line">    _Distort(<span class="string">&quot;Distort&quot;</span>,Float) = <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">  SubShader</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="comment">// No culling or depth</span></span><br><span class="line">    Cull Off ZWrite Off ZTest Always</span><br><span class="line"></span><br><span class="line">    Pass</span><br><span class="line">    &#123;</span><br><span class="line">      CGPROGRAM</span><br><span class="line">      <span class="meta">#<span class="keyword">pragma</span> vertex vert_img</span></span><br><span class="line">      <span class="meta">#<span class="keyword">pragma</span> fragment frag</span></span><br><span class="line">      </span><br><span class="line">      <span class="meta">#<span class="keyword">include</span> <span class="string">&quot;UnityCG.cginc&quot;</span></span></span><br><span class="line">    </span><br><span class="line">      sampler2D _MainTex;</span><br><span class="line">      sampler2D _GlassMask;</span><br><span class="line">      float4 _GlassMask_ST;</span><br><span class="line">      <span class="type">float</span> _GlassCrack;</span><br><span class="line">      sampler2D _GlassNormal;</span><br><span class="line">      <span class="type">float</span> _Distort;</span><br><span class="line"></span><br><span class="line">      half4 <span class="title function_">frag</span> <span class="params">(v2f_img i)</span> : SV_Target</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="type">float</span> aspect = _ScreenParams.x / _ScreenParams.y; <span class="comment">// x = width y = height z = 1 + 1.0/width w = 1 + 1.0/height</span></span><br><span class="line">        float2 glass_uv = float2(i.uv.x * aspect, i.uv.y) * _GlassMask_ST.xy + _GlassMask_ST.zw;</span><br><span class="line"></span><br><span class="line">        half glass_opacity = tex2D(_GlassMask, glass_uv).r;</span><br><span class="line">        half3 glass_normal = UnpackNormal(tex2D(_GlassNormal, glass_uv));</span><br><span class="line"></span><br><span class="line">        half2 d = <span class="number">1.0</span> - smoothstep(<span class="number">0.95</span>,<span class="number">1</span>,<span class="built_in">abs</span>(i.uv * <span class="number">2.0</span> - <span class="number">1.0</span>));</span><br><span class="line">        half vfactor = d.x * d.y;</span><br><span class="line"></span><br><span class="line">        float2 d_mask = step(<span class="number">0.005</span>, <span class="built_in">abs</span>(glass_normal.xy));</span><br><span class="line">        <span class="type">float</span> mask = d_mask.x * d_mask.y;</span><br><span class="line"></span><br><span class="line">        half2 uv_distort = i.uv + glass_normal.xy * _Distort * vfactor * mask;</span><br><span class="line">        half4 col = tex2D(_MainTex, uv_distort);</span><br><span class="line">        half3 finalcolor = col.rgb;</span><br><span class="line">        finalcolor = lerp(finalcolor, _GlassCrack.xxx, glass_opacity);</span><br><span class="line">        <span class="keyword">return</span> float4(finalcolor,col.a);</span><br><span class="line">      &#125;</span><br><span class="line">      ENDCG</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h4 id=""><a href="#" class="headerlink" title=""></a></h4>
            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="/music/jucilang.mp3">
            </audio>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='true'
        data-ae='true'
        data-ci='99f95a936c6fcdb1bd67'
        data-cs='c2d1bba3d6b7f9ade4f3de09a63925bd837c25ea'
        data-r='mrchenlearnspace.github.io'
        data-o='MrChenLearnSpace'
        data-a='MrChenLearnSpace'
        data-d='false'
    >查看评论</div>


    </div>
    
        <div class='side'>
			<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%90%8E%E5%A4%84%E7%90%86%EF%BC%88%E4%B8%8A%EF%BC%89"><span class="toc-number">1.</span> <span class="toc-text">后处理（上）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%AF%E7%94%A8%E5%90%8E%E5%A4%84%E7%90%86"><span class="toc-number">1.1.</span> <span class="toc-text">启用后处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E6%9D%BF"><span class="toc-number">1.2.</span> <span class="toc-text">背景板</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E7%A7%8D"><span class="toc-number">1.2.1.</span> <span class="toc-text">第一种</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E7%A7%8D"><span class="toc-number">1.2.2.</span> <span class="toc-text">第二种</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%A7%8D"><span class="toc-number">1.2.3.</span> <span class="toc-text">第三种</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E6%9D%BF%E4%BB%A3%E7%A0%81"><span class="toc-number">1.2.4.</span> <span class="toc-text">背景板代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%83%E8%89%B2"><span class="toc-number">1.3.</span> <span class="toc-text">调色</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#ASE"><span class="toc-number">1.3.1.</span> <span class="toc-text">ASE</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%85%E5%AE%B9"><span class="toc-number">1.3.2.</span> <span class="toc-text">内容</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%89%B2%E8%B0%83"><span class="toc-number">1.3.2.1.</span> <span class="toc-text">色调</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%AE%E5%BA%A6"><span class="toc-number">1.3.2.2.</span> <span class="toc-text">亮度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A5%B1%E5%92%8C%E5%BA%A6"><span class="toc-number">1.3.2.3.</span> <span class="toc-text">饱和度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%B9%E6%AF%94%E5%BA%A6"><span class="toc-number">1.3.2.4.</span> <span class="toc-text">对比度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9A%97%E8%A7%92-x2F-%E6%99%95%E5%BD%B1"><span class="toc-number">1.3.2.5.</span> <span class="toc-text">暗角&#x2F;晕影</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B0%83%E8%89%B2%E4%BB%A3%E7%A0%81"><span class="toc-number">1.3.3.</span> <span class="toc-text">调色代码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A0%B4%E7%A2%8E%E7%9A%84%E7%8E%BB%E7%92%83"><span class="toc-number">1.4.</span> <span class="toc-text">破碎的玻璃</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E7%8E%BB%E7%92%83"><span class="toc-number">1.4.1.</span> <span class="toc-text">上玻璃</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E6%B3%95%E7%BA%BF"><span class="toc-number">1.4.2.</span> <span class="toc-text">上法线</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E8%BE%B9%E7%BC%98%E6%B3%95%E7%BA%BF%E8%B4%B4%E5%9B%BE%E9%87%8D%E5%BD%B1"><span class="toc-number">1.4.3.</span> <span class="toc-text">解决边缘法线贴图重影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%B3%95%E7%BA%BF%E8%B4%B4%E5%9B%BE%E6%AF%9B%E7%8E%BB%E7%92%83%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">1.4.4.</span> <span class="toc-text">解决法线贴图毛玻璃的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E4%BB%A3%E7%A0%81"><span class="toc-number">1.4.5.</span> <span class="toc-text">总代码</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link"><span class="toc-number">1.4.5.1.</span> <span class="toc-text"></span></a></li></ol></li></ol></li></ol></li></ol>	
        </div>
    
</div>


    </div>
</div>
</body>

<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/blog/js/plugin.js"></script>
<script src="/blog/js/typed.js"></script>
<script src="/blog/js/diaspora.js"></script>


<link rel="stylesheet" href="/blog/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/blog/photoswipe/default-skin/default-skin.css">


<script src="/blog/photoswipe/photoswipe.min.js"></script>
<script src="/blog/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



<script type="text/x-mathjax-config">
    MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
        tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno",skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']},
        TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
        messageStyle: "none"
    });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>



<!-- Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YMJ8CBH8F7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YMJ8CBH8F7');
</script>
<!-- End Google Analytics -->


</html>
